<template>
  <div id="wrapper" ref="wrapper">
    <div>
<!--      <router-link v-if="!url.includes('//')" :to="url">百度</router-link>-->
<!--      <a :href="url" target="_blank" v-else>百度</a>-->
      <slot></slot>
    </div>
  </div>
</template>

<script>
import BetterScroll from 'better-scroll'

export default {
  name: 'bScroll',
  components: {},
  data () {
    return {
      scroll: {},
      position: 0,
      url: 'http://www.baidu.com'
    }
  },
  props: {
    probeType: {
      type: Number,
      default () {
        return 0
      }
    },
    pullUpLoad: {
      type: Boolean,
      default () {
        return false
      }
    },
  },
  methods: {
    refresh () {
      this.scroll && this.scroll.refresh()
    },
    scrollMove (x, y, time = 300, isTo) {
      this.scroll && (isTo ? this.scroll.scrollTo(x, y, time) : this.scroll.scrollBy(x, y, time))
    },
    scrollStop () {
      this.scroll && this.scroll.stop()
    },
    sentDir() {
      this.$store.commit('getDirection', this.scroll.directionY + this.scroll.movingDirectionY)
    },
    finishPullUp(){
      this.scroll && this.scroll.finishPullUp()
    }

  },
  mounted () {
    let timer, lastTime;
    let now = +Date.now();
    this.$nextTick(() => {
      this.scroll = new BetterScroll(this.$refs.wrapper, {
        movable: true,
        zoom: true,
        click: true,
        dblclick:true,
        preventDefaultException:{tagName:/^(INPUT|TEXTAREA|BUTTON|SELECT|AUDIO)$/},
        probeType: this.probeType,
        pullUpLoad: this.pullUpLoad,
        scrollY: true,
        mouseWheel: {
          speed: 20,
          invert: false,
          easeTime: 300
        },
        scrollbar:{
          fade:false,
          interactive:true
        }
      })
      this.scroll.on('scroll', pos => {
        const _this = this;
        this.position = - pos.y
        this.$store.commit('getPosition', this.position)
        // this.$store.commit('getDirection', this.scroll.directionY + this.scroll.movingDirectionY)
        if (lastTime && now - lastTime < 100) {
          clearTimeout(timer);
          timer = setTimeout(() => {
            _this.$store.commit('getDirection', _this.scroll.directionY + _this.scroll.movingDirectionY)
            lastTime = +new Date();
            // console.log(Date.now(),'上面')
          }, 20);
        } else {
          lastTime = now;
          timer = setTimeout(() => {
            _this.$store.commit('getDirection', _this.scroll.directionY + _this.scroll.movingDirectionY)
            lastTime = +new Date();
            // console.log(Date.now(),'下面')
          }, 20);
        }

      })
      this.scroll.on('pullingUp', () => {
        this.$emit('pullingUp')
      })
      this.scroll.openPullUp({
        threshold: 200
      })
    })

  },
  beforeDestroy () {
    this.scroll.destroy()
  }
}
</script>

<style>
#wrapper {
  /*position: relative;*/
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  margin: 0 auto;
}
</style>
